<template>
  <div class="base-info-container">
    <SectionTitle title="基础信息" style="margin: 0px 0 8px;"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="100px"
      class="base-info-form height55"
      style="margin-bottom: 24px">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col :span="12">
          <el-form-item label="审批单号:">
            <ToolTip :content="baseInfo.approvalNo" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:">
            <ToolTip :content="baseInfo.createTime | format('YYYY/MM/DD HH:mm')" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人:">
            <CheckUserInfo v-if="baseInfo.creator" :label="baseInfo.creator" :user-id="baseInfo.creatorId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门:">
            <ToolTip :content="baseInfo.attributionMatrixName" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请人:">
            <CheckUserInfo v-if="baseInfo.proposer" :label="baseInfo.proposer" :user-id="baseInfo.proposerId" />
            <div v-else>--</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请部门:">
            <ToolTip :content="baseInfo.departmentName" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属公司:">
            <ToolTip :content="baseInfo.companyName" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报销类型:">
            <ToolTip :content="baseInfo.type | reimbursementTypes" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分摊费用:">
            <ToolTip :content="baseInfo.isAllocation | radioType" placement="top-start" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="冲抵借款:">
            <ToolTip :content="baseInfo.isWriteOff | radioType" placement="top-start" />
          </el-form-item>
        </el-col>
        <template v-if="baseInfo.isWriteOff">
          <el-col :span="12">
            <el-form-item label="借款欠额(元):">
              <div class="flex-center">
                <ToolTip :content="numberToFixed('arrearsAmount')" placement="top-start" />
                <span style="margin-left: 10px; color: #999">
                  ( 实时：<span style="color: #31CC9C">{{ numberToFixed('realTimeArrearsAmount') }}</span> )
                </span>
                <el-tooltip placement="top">
                  <div slot="content" v-html="arrearsAmountTip" />
                  <tipIcon is-diy/>
                </el-tooltip>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="冲抵借款欠额(元):">
              <ToolTip :content="numberToFixed('writeOffAmount')" placement="top-start" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="12">
          <el-form-item label="实付金额(元):">
            <div class="flex-center">
              <ToolTip :content="numberToFixed('paymentAmount')" placement="top-start" />
              <el-tooltip placement="top">
                <div slot="content">{{ paymentAmountTip }}</div>
                <tipIcon is-diy class="ml5"/>
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件:">
            <div class="ellipsis">
              <FileShowList
                v-if="baseInfo.attachment && baseInfo.attachment.length"
                :file-list="baseInfo.attachment"
                style="max-width:100%;" />
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划支付日期:">
            <div class="flex-center">
              <ToolTip :content="baseInfo.planPaymentDate | format('YYYY/MM/DD')" />
              <span v-if="isEditDate" class="edit-btn" @click="showPlanPaymentDialog('plan')">编辑</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际支付日期:">
            <div class="flex-center">
              <ToolTip :content="baseInfo.actualPaymentDate | format('YYYY/MM/DD')" />
              <span v-if="isEditDate" class="edit-btn" @click="showPlanPaymentDialog('actual')">编辑</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <PlanPaymentDialog
      ref="planPaymentDialogRef"
      :curr-date="currDate"
      :title="dialogTitle"
      @confirm="editPlanPaymentDate"
    />
  </div>
</template>
<script>
import FileShowList from '@/components/CreateOrder/fileShowList';
import SectionTitle from '@/components/Title';
import PlanPaymentDialog from '@/components/Common/planPaymentDialog';
import { format } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  components: {
    SectionTitle,
    FileShowList,
    PlanPaymentDialog
  },
  filters: {
    reimbursementTypes(status) {
      return {
        0: '常规',
        1: '差旅'
      }[status] || '--';
    },
    radioType(status) {
      return {
        0: '否',
        1: '是'
      }[status] || '--';
    },
    format
  },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    isEditDate: { // 审批已完成
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogTitle: '计划支付日期',
      editDateType: 'plan' // 当前编辑的时间是什么。 plan:计划支付时间 actual:实际支付时间
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    currDate() {
      return this.editDateType === 'plan' ? this.baseInfo.planPaymentDate : this.baseInfo.actualPaymentDate;
    },
    arrearsAmountTip() {
      return `
        <div>借款欠额=借款金额-还款金额-冲抵借款欠额-转交欠款+被转交欠款</div>
        <div>当付款后借款欠额将进行快照，实时值为即时统计</div>
      `;
    },
    paymentAmountTip() {
      return `实付金额=总报销金额-冲抵借款欠额`;
    },
    realTimeArrearsAmount() {
      const { realTimeArrearsAmount } = this.baseInfo;
      if (realTimeArrearsAmount || realTimeArrearsAmount === 0) {
        return realTimeArrearsAmount;
      } else {
        return '--';
      }
    }
  },
  methods: {
    numberToFixed(key) {
      const amount = this.baseInfo[key];
      if (amount || amount === 0) {
        return (+amount).toFixed(2);
      } else {
        return '--';
      }
    },
    showPlanPaymentDialog(type) {
      this.editDateType = type;
      if (type === 'actual') {
        this.dialogTitle = '实际支付日期';
      } else {
        this.dialogTitle = '计划支付日期';
      }
      this.$refs['planPaymentDialogRef'].dialogVisible = true;
    },
    editPlanPaymentDate(val) {
      this.$emit('editPlanPaymentDate', val, this.editDateType);
    }
  }
};
</script>
<style lang="scss" scoped>
.base-info-container{
  .base-info-form {
    & ::v-deep {
      .el-form-item {
        .el-form-item__label {
          font-size: 14px;
          font-weight: 400;
          color: #999999 !important;
          opacity: 1;
          line-height: 30px;
        }
      }
      .el-form-item__content {
        font-size: 14px;
        line-height: 30px;
        font-weight: 400;
        color: #333333;
        opacity: 1;
      }
    }
    .edit-btn {
      color: #406EFF;
      margin-left: 4px;
      cursor: pointer;
    }
  }
  .dividing {
    &::v-deep {
      .el-col {
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        &:nth-child(2n) {
          .el-form-item__content {
            border-right: none;
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>
